<template>
    <div>
        <el-button @click="open">新增banner</el-button>
        <el-table
            :data="bannerList"
            style="width: 100%">
            <el-table-column
                type="index"
                label="序号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="active_name"
                label="活动名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="url"
                label="活动地址"
                width="180">
            </el-table-column>
            <el-table-column
                label="图片">
                <template  slot-scope="scope">
                    <img :src="scope.row.image" class="banner-img">
                </template>
            </el-table-column>
            <el-table-column
                prop="start_time"
                label="开始时间">
                <template  slot-scope="scope">
                    <div>
                        {{scope.row.start_time | formatTime}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="end_time"
                label="结束时间">
                <template  slot-scope="scope">
                    <div>
                        {{scope.row.end_time  | formatTime}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <BannerDialog
            :isOpen="isOpen"
            @closeDialog="close"
            @addBanner="addBanner"
            ref="bannerDialog"
            :initBannerInfo="initBannerInfo"
        ></BannerDialog>
    </div>
</template>

<script>
import api from '@/api';
import BannerDialog from './components/bannerDialog.vue';
import moment from 'moment';
export default {
    async created(){
        let res = await api.getBannerList();
        this.bannerList = res.data;
    },
    data() {
        return {
            bannerList: [],  //banner数据
            isOpen:false,
            initBannerInfo:{}  //编辑的banner对象
        }
    },
    components:{
        BannerDialog
    },
    filters:{
        formatTime(val){
            return moment(val).format('YYYY-MM-DD')
        }
    },
    methods:{
        //打开弹窗
        open(){
            this.isOpen = true;
        },
        //关闭弹窗
        close(){
            this.isOpen = false;
            this.$refs.bannerDialog.$refs.bannerForm.resetFields()//重置表单
            this.initBannerInfo = {};
        },
        //添加banner
        addBanner(bannerData){
            //区分添加和编辑
            let fun = bannerData.id ? 'editBanner' : 'addBanner';
            api[fun](bannerData).then(() => {
                //1.添加的数据显示出来  获取表格数据
                return api.getBannerList();
            }).then(res => {
                this.bannerList = res.data;
               //2.关闭弹窗
                //3.清空表单
                this.close();
            })
        },
        //编辑
        handleEdit(data){
            this.open();
            this.initBannerInfo = {
                ...data,
                start_time:moment(data.start_time).format('YYYY-MM-DD'),
                end_time:moment(data.end_time).format('YYYY-MM-DD')
            };
        }
    }
}
</script>

<style scoped lang="scss">
    .banner-img{
        max-height: 100%;
        max-width: 100%;
    }
</style>
